<template>
    <div class="website flex font f16">
        <AsideVue></AsideVue>
        <div class="w100p">
            <NavVue></NavVue>
            <div class="wrop flex mt-10">
                <!-- 左侧菜单栏 -->
                <div class="wrop-left flex fdc">
                    <div class="left-menu flex">
                        <el-menu
                            default-active="themes"
                            class="el-menu-vertical-demo fg1"
                            @open="handleOpen"
                            @close="handleClose"
                            @select="handleSelect"
                        >
                            <el-menu-item index="themes">
                            <el-icon><Menu /></el-icon>
                            <span>Websites</span>
                            </el-menu-item>
                            <el-menu-item index="categories">
                                <template #title>
                                    <el-icon><Ticket /></el-icon>
                                    <span>Categories </span>
                                </template>
                            </el-menu-item>
                            <el-menu-item index="pages">
                                <template #title>
                                    <el-icon><DocumentCopy /></el-icon>
                                    <span>Pages </span>
                                </template>
                            </el-menu-item>
                            <el-menu-item index="banners">
                            <el-icon><Histogram /></el-icon>
                            <span>Banners</span>
                            </el-menu-item>
                            <el-menu-item index="meuns">
                            <el-icon><User /></el-icon>
                            <span>Meuns</span>
                            </el-menu-item>
                            <el-menu-item index="settings">
                            <el-icon><Operation /></el-icon>
                            <span>Settings</span>
                            </el-menu-item>
                        </el-menu>
                    </div>
                </div>
                <!-- 右侧显示内容 -->
                <div class="wrop-right fg1 flex">
                    <router-view></router-view>
                </div>
                <ImPage></ImPage>
            </div>
        </div>
    </div>
</template>

<script setup>

import { ref, onMounted } from "vue";
import { useRouter } from 'vue-router'
import  ImPage  from './components/ImPage.vue'
import AsideVue from "../components/Aside.vue";
import NavVue from "../components/Nav.vue";
import { ArrowDown } from '@element-plus/icons-vue'
import {
    Document,
    Menu as IconMenu,
    Location,
    Menu,
    DocumentCopy,
    User,
    Histogram,
    Ticket,
    Operation,
} from '@element-plus/icons-vue'

const router = useRouter()

// 菜单栏
// const handleOpen = (key, keyPath) => {
//     console.log(key, keyPath)
// }
// const handleClose = (key, keyPath) => {
//     console.log(key, keyPath)
// }
// 菜单栏end
onMounted(() => {
    // router.push({ path: `/website/Themes` })

})
const handleSelect = (keyPath) => {
    console.log( keyPath)
    router.push({ path: `/website/${keyPath}` })
}
// const input = ref('Search')
</script>

<style lang="less" scoped>
@import "./index.less";
</style>